<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>申し込み内容のご入力</title>
    <link rel="stylesheet" href="/css/all.css">
</head>

<body>
<div class="header">
    <div>
        <a href="#">カードサイト</a>
        <a href="#">お手続き</a>
        <a href="#">お問い合わせ</a>
        <a href="#">会員ログイン</a>
    </div>
</div>

<hr>

<div class="title-bar container0">申し込み内容のご入力</div>
<div class="container">
    <hr>

    <!-- 添加表单标签 -->
    <form action="/apply/xinxi2" method="post" th:object="${app}">
        <!-- 填写信息 -->

        <!-- 住所情報登録 -->
        <div class="section-title"><strong>住所情報登録</strong></div>

        <div class="form-container">
            <div class="form-group">
                <div class="label">住所種別 <span><img src="/images/icon_required.png" alt=""></span></div>
                <div class="input-group">
                    <select name="jkysbt" class="input-field" required th:field="*{jkysbt}">
                        <option value="1" th:selected="${app.jkysbt == '1'}">本人持家</option>
                        <option value="0" th:selected="${app.jkysbt == '0'}">賃貸</option>
                    </select>
                    <div th:if="${#fields.hasErrors('jkysbt')}" style="color: red; font-size: 14px; margin-top: 5px;">
                        <span th:errors="*{jkysbt}"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">電話番号</div>
                <div class="input-group">
                    <input type="tel" name="tel" class="input-field" placeholder="例:+81-03-0000-1111"
                           th:field="*{tel}">
                    <div th:if="${#fields.hasErrors('tel')}" style="color: red; font-size: 14px; margin-top: 5px;">
                        <span th:errors="*{tel}"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">郵便番号<span><img src="/images/icon_required.png" alt=""></span></div>
                <div class="input-group">
                    <input type="text" name="post" class="input-field" placeholder="例:101-0001" required
                           th:field="*{post}">
                    <div th:if="${#fields.hasErrors('post')}" style="color: red; font-size: 14px; margin-top: 5px;">
                        <span th:errors="*{post}"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">都・道・府・県<span><img src="/images/icon_required.png" alt=""></span></div>
                <div class="input-group">
                    <select name="knc" class="input-field" required th:field="*{knc}">
                        <option value="1" th:selected="${app.knc == '1'}">北海道</option>
                        <option value="0" th:selected="${app.knc == '0'}">青森県</option>
                        <!-- 其他选项省略 -->
                    </select>
                    <div th:if="${#fields.hasErrors('knc')}" style="color: red; font-size: 14px; margin-top: 5px;">
                        <span th:errors="*{knc}"></span>
                    </div>
                </div>
            </div>

            <!-- 住所 -->
            <div class="form-group">
                <div class="label">住所 <span><img src="/images/icon_required.png" alt=""></span></div>
                <div class="input-group">
                    <div style="width: 100%; display: flex; flex-direction: column;">
                        <div class="field-row">
                            <label for="addressCity">市・区・町・村</label>
                            <input type="text" id="addressCity" name="jskj1" class="input-field"
                                   placeholder="例>東京都品川区西品川1-1-1" required th:field="*{jskj1}">
                            <div th:if="${#fields.hasErrors('jskj1')}"
                                 style="color: red; font-size: 14px; margin-top: 5px;">
                                <span th:errors="*{jskj1}"></span>
                            </div>
                        </div>
                        <div class="field-row">
                            <label for="building">建物・部屋番号</label>
                            <input type="text" id="building" name="jskj2" class="input-field"
                                   placeholder="例>品川ビル 101室" required th:field="*{jskj2}">
                            <div th:if="${#fields.hasErrors('jskj2')}"
                                 style="color: red; font-size: 14px; margin-top: 5px;">
                                <span th:errors="*{jskj2}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 住所フリガナ -->
            <div class="form-group">
                <div class="label">住所フリガナ <span><img src="/images/icon_required.png" alt=""></span></div>
                <div class="input-group">
                    <div style="width: 100%; display: flex; flex-direction: column;">
                        <div class="field-row">
                            <label for="addressKanaCity">市・区・町・村</label>
                            <input type="text" id="addressKanaCity" name="jskn1" class="input-field"
                                   placeholder="<例>トウキョウトシナガワクニシナガワ1-1-1" required th:field="*{jskn1}">
                            <div th:if="${#fields.hasErrors('jskn1')}"
                                 style="color: red; font-size: 14px; margin-top: 5px;">
                                <span th:errors="*{jskn1}"></span>
                            </div>
                        </div>
                        <div class="field-row">
                            <label for="buildingKana">建物・部屋番号</label>
                            <input type="text" id="buildingKana" name="jskn2" class="input-field"
                                   placeholder="<例>シナガワビル 101シツ" required th:field="*{jskn2}">
                            <div th:if="${#fields.hasErrors('jskn2')}"
                                 style="color: red; font-size: 14px; margin-top: 5px;">
                                <span th:errors="*{jskn2}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <!-- 申請情報登録 -->
            <div class="section-title"><strong>申請情報登録</strong></div>
            <div class="form-container">
                <div class="form-group">
                    <div class="label">ショッピング枠区分<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <select class="input-field" name="spgtorkbn" required th:field="*{spgtorkbn}">
                            <option name="spgtorkbn" value="1" th:selected="${app.spgtorkbn == '1'}">10万</option>
                            <option name="spgtorkbn" value="2" th:selected="${app.spgtorkbn == '2'}">20万</option>
                            <option name="spgtorkbn" value="3" th:selected="${app.spgtorkbn == '3'}">30万</option>
                            <option name="spgtorkbn" value="4" th:selected="${app.spgtorkbn == '4'}">40万</option>
                            <option name="spgtorkbn" value="5" th:selected="${app.spgtorkbn == '5'}">50万</option>
                            <option name="spgtorkbn" value="6" th:selected="${app.spgtorkbn == '6'}">60万</option>
                            <option name="spgtorkbn" value="7" th:selected="${app.spgtorkbn == '7'}">70万</option>
                            <option name="spgtorkbn" value="8" th:selected="${app.spgtorkbn == '8'}">80万</option>
                        </select>
                        <div th:if="${#fields.hasErrors('spgtorkbn')}"
                             style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{spgtorkbn}"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">ショッピング取引目的区分</div>
                    <div class="input-group">
                        <select name="spgkbn" class="input-field" th:field="*{spgkbn}">
                            <option name="main" value="1" th:selected="${app.spgkbn == '1'}">生计费</option>
                            <option name="backup" value="2" th:selected="${app.spgkbn == '2'}">事簕费</option>
                            <option name="shen" value="3" th:selected="${app.spgkbn == '3'}">生计费その</option>
                            <option name="sono" value="4" th:selected="${app.spgkbn == '4'}">その</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">キャッシング枠区分<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <select class="input-field" name="csgkbn" required th:field="*{csgkbn}">
                            <option name="none" value="1" th:selected="${app.csgkbn == '1'}">不要</option>
                            <option name="100000" value="2" th:selected="${app.csgkbn == '2'}">1万</option>
                            <option name="200000" value="3" th:selected="${app.csgkbn == '3'}">2万</option>
                            <option name="300000" value="4" th:selected="${app.csgkbn == '4'}">3万</option>
                            <option name="400000" value="5" th:selected="${app.csgkbn == '5'}">5万</option>
                            <option name="500000" value="6" th:selected="${app.csgkbn == '6'}">7万</option>
                            <option name="600000" value="7" th:selected="${app.csgkbn == '7'}">10万</option>
                            <option name="700000" value="8" th:selected="${app.csgkbn == '8'}">20万</option>
                            <option name="800000" value="9" th:selected="${app.csgkbn == '9'}">50万</option>
                        </select>
                        <div th:if="${#fields.hasErrors('csgkbn')}"
                             style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{csgkbn}"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">キャッシング取引目的区分</div>
                    <div class="input-group">
                        <select name="torkbn" class="input-field" th:field="*{torkbn}">
                            <option name="main" value="1" th:selected="${app.torkbn == '1'}">主計画融資</option>
                            <option name="backup" value="2" th:selected="${app.torkbn == '2'}">備用</option>
                            <option name="shen" value="3" th:selected="${app.torkbn == '3'}">その</option>
                        </select>
                    </div>
                </div>
            </div>

            <hr>

            <!-- 個人情報登録 -->
            <div class="section-title"><strong>個人情報登録</strong></div>

            <div class="form-container">
                <div class="form-group">
                    <div class="label">運転免許証</div>
                    <div class="input-group">
                        <input type="text" name="driverid" class="input-field"
                               placeholder="例:+81-123456789012" th:field="*{driverid}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">健康保険証番号</div>
                    <div class="input-group">
                        <input type="text" name="kkhcd" class="input-field"
                               placeholder="例:+81-12345678901234567890" th:field="*{kkhcd}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">本人確認書類確認方法</div>
                    <div class="input-group">
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="method1" name="hnnhhucd" value="1"
                                       th:field="*{hnnhhucd}" class="radio-button">
                                <label for="method1" class="radio-label">申込後</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="method0" name="hnnhhucd" value="2"
                                       th:field="*{hnnhhucd}" class="radio-button">
                                <label for="method0" class="radio-label">メールで登録</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="method2" name="hnnhhucd" value="3"
                                       th:field="*{hnnhhucd}" class="radio-button">
                                <label for="method2" class="radio-label">郵送で登録</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="method3" name="hnnhhucd" value="4"
                                       th:field="*{hnnhhucd}" class="radio-button">
                                <label for="method3" class="radio-label">カードのお届けで</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">配偶者有無</div>
                    <div class="input-group">
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="spouseYes" name="hgsumk" value="0"
                                       th:field="*{hgsumk}" class="radio-button">
                                <label for="spouseYes" class="radio-label">有</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="spouseNo" name="hgsumk" value="1"
                                       th:field="*{hgsumk}" class="radio-button">
                                <label for="spouseNo" class="radio-label">無</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 配偶者信息（初始隐藏） -->

                <!-- 家族相关选项（初始隐藏） -->
                <!-- 修改 #familyOptions 的样式 -->
                <div id="familyOptions" style="display: none;">
                    <div class="form-group">
                        <div class="label">家族カード付け希望</div>
                        <div class="input-group">
                            <div class="name-fields" style="display: flex; gap: 20px;">
                                <div class="radio-option">
                                    <input type="radio" id="kzkkbn-yes" name="kzkkbn" value="0"
                                           th:field="*{kzkkbn}" class="radio-button">
                                    <label for="kzkkbn-yes" class="radio-label">有</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="kzkkbn-no" name="kzkkbn" value="1"
                                           th:field="*{kzkkbn}" class="radio-button">
                                    <label for="kzkkbn-no" class="radio-label">無</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label">家族カード案内メール希望</div>
                        <div class="input-group">
                            <div class="name-fields" style="display: flex; gap: 20px;">
                                <div class="radio-option">
                                    <input type="radio" id="kzmailflg-yes" name="kzkmlflg" value="0"
                                           th:field="*{kzkmlflg}" class="radio-button">
                                    <label for="kzmailflg-yes" class="radio-label">有</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="kzmailflg-no" name="kzkmlflg" value="1"
                                           th:field="*{kzkmlflg}" class="radio-button">
                                    <label for="kzmailflg-no" class="radio-label">無</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label">キャンペーンメール希望</div>
                        <div class="input-group">
                            <div class="name-fields" style="display: flex; gap: 20px;">
                                <div class="radio-option">
                                    <input type="radio" id="cammlflg-yes" name="cammlflg" value="0"
                                           th:field="*{cammlflg}" class="radio-button">
                                    <label for="cammlflg-yes" class="radio-label">有</label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="cammlflg-no" name="cammlflg" value="1"
                                           th:field="*{cammlflg}" class="radio-button">
                                    <label for="cammlflg-no" class="radio-label">無</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 原来的按钮被替换为两个按钮 -->
                <div style="text-align: center; margin-top: 20px;">
                    <button type="button" class="button-back" onclick="window.history.back()">戻る</button>
                    <button type="submit" class="button-next">次へ進む</button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 居中显示版权信息 -->
<div class="container">
    <p style="text-align: center;">Copyright © H · All Rights Reserved ·</p>
</div>

</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const spouseYes = document.getElementById('spouseYes');
        const spouseNo = document.getElementById('spouseNo');
        const familyOptions = document.getElementById('familyOptions');

        // 初始状态：不选中任何选项
        spouseYes.checked = false;
        spouseNo.checked = false;
        familyOptions.style.display = 'none';

        // 监听变化
        spouseYes.addEventListener('change', function () {
            if (this.checked) {
                familyOptions.style.display = 'none';
            }
        });

        spouseNo.addEventListener('change', function () {
            if (this.checked) {
                familyOptions.style.display = 'block';
            }
        });
    });
</script>

</html>
